<!DOCTYPE html>
<html>
	<head>
		<title>CSS Reftest Reference</title>
		<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
		<link rel="stylesheet" href="../support/common.css">
		<style>
		.editable-container {
			width: 300px;
			border: 2px solid blue;
		}
		.editable {
			font-family: Times, serif;
			font-size: 20px;
			line-height: 1em;
		}
		.region {
			width: 300px;
			height: 200px;
			border: 2px solid black;
			margin: .5em 0 .5em 0;
		}
		</style>
	</head>
	<body>
		<ol>
			<li>Below you should see a rectangle with a blue border and a rectangle with a black border.
				The blue rectangle should have one block of text inside it and the black rectangle
				should have two blocks of text inside it. No red should be visible at any time during
				this test.</li>
			<li>Double click on the word &ldquo;editable&rdquo; in the blue rectangle and type
				&ldquo;foobar bazquux&rdquo;.
				<ul>
				 	<li>The word &ldquo;editable&rdquo; should be replaced with &ldquo;foobar bazquux&rdquo;.</li>
				 </ul>
			</li>
			<li>Repeat the steps above, but for the two occurrences of the word &ldquo;editable&rdquo;
				in the black rectangle. The expected results are the same as for the previous step.
			</li>
		</ol>
		
		<div class="editable-container" contentEditable="true">
			<p class="editable">
				This text should be displayed outside of the black border and <span id="marked-outside">foobar bazquux</span>.
			</p>
		</div>
		
		<div class="region">
			<div contentEditable="true">
				<p class="editable">
					This text should be displayed inside the black border and it should also be <span id="marked-inside">foobar bazquux</span>.
				</p>
				<p class="editable">
					This text should also be displayed inside the black border and <span id='marked-inside-new'>foobar bazquux</span>.
				</p>
			</div>
		</div>
	</body>
</html>